<script setup>
import {ref,onMounted,watch} from "vue";
import hospitalapi from '../api'
import { ElMessageBox,ElMessage } from "element-plus";

//绑定数据
const tableData=ref([]);


//控制编辑信息窗口是否显示
const editWinVisible=ref(false);
//新增数据绑定对象（双向绑定)
const addObject=ref({});
//编辑数据绑定对象（双向绑定）
const editObject=ref({});
//储存所有床源信息
const beds = ref([]);
const doctors = ref([]);
const wnames=ref([]);



const leaveWinVisible = ref(false);  // 入院窗口
const leaveObject = ref({  });          // 入院对象
//住院状态
const filterStatus = ref('');
//查询数据文本
const checkObj=ref({
  page:1,
  size:5,
    pid: '', // 患者编号
  status: '' // 查询状态，初始为空
 
  
});
const total=ref(90);

//记录修改数据的下标
let editIndex=-1
//挂载页面时查询数据
onMounted( function () {
 checkData();
  
});
const checkData=async function(val){
  //相当于点了分页按钮
  if(typeof val=='number'){
    checkObj.value.page=val
  }
  

  //查询数据
  let result=await hospitalapi.get("/api/cases",checkObj.value)


  //更新表格中的数据
 
  tableData.value=result.data.list;
  total.value=result.data.count;


}




async function leave(index,row){
  openleaveWin(); // 进入出院信息窗口
  editIndex=index;
  leaveObject.value.pid = row.patient.id;
  leaveObject.value.id=row.id;
 leaveObject.value. did=row.doctor.id;
  leaveObject.value.wid=row.ward.id;
  leaveObject.value.bid=row.bed.id;
  leaveObject.value.name=row.patient.name;  
  console.log("获取的数据");
  console.log(leaveObject);
  console.log("row");
  console.log(row);
    console.log("获取的数据");


   
}



const openleaveWin = () => {
  leaveObject.value = {
    disdate: new Date().toISOString().substring(0, 10), // 设置为今天
    
    // 其他默认字段可以在这里初始化
  };
  leaveWinVisible.value = true; // 打开入院窗口
};



const leaveSave = async () => {
  try {
    // 发送出院数据到后端API
 console.log(leaveObject.value)
    
    const response  =  hospitalapi.putJson("/api/editcasespay", leaveObject.value)
   
 .then(response => {
tableData.value[editIndex]=response.data;
    if (response.code === 200 ) {
      
      // 成功处理（例如关闭窗口，更新列表等）
      leaveWinVisible.value = false;
      alert("出院信息保存成功！");
      
      checkData()
      
    }
     })
  } catch (error) {
    console.error("保存出院信息失败:", error);
    alert("保存失败，请重试。");
  }
};




const del=function(index,row){
  ElMessageBox.confirm(
    "确认要删除该行数据吗",
    "提示",{
      confirmButtonText:"确认",
      concelButtonText:"取消",
      type:"warning"
    }
  ).then(async function(){
      //提交数据
      let result=await hospitalapi.del("/api/cases",row.id);
      if(result.code=200){
        //刷新表格数据
        tableData.value.splice(index,1);
        //提示删除成功
        ElMessage({
          type:'success',
          message:'删除成功',
        })
      }else{
        ElMessage({
          type:'info',
          message:result.message
        })
      }

  }) 
   
    
}
//新增数据 addObject 
const addSave=async function(){
  
  //发送请求
  
  let result=await hospitalapi.postJson("/api/cases",addObject.value);


  tableData.value.unshift(result.data);
  

    //表格数据变更

    //提示
  ElMessage({
    type:'success',
    message:'保存成功',
  });


  closeaddWin();
}


//保存编辑数据
const editSave=async function(index){
  //发送请求
  let result=await hospitalapi.putJson("/api/casesjson",editObject.value);
  
  //刷新表格
  tableData.value[editIndex]=result.data;
  //提示
  if(result.code==200){
    ElMessage({
    type:'success',
    message:'保存成功',
  });
  editWinVisible.value=false;
  }else{
    ElMessage({
      type: 'error',
      message:'保存失败'
    })
  }
  
}
//点击编辑按钮执行的方法
const edit=async function(index,row){
  //记录修改数据的下标
  editIndex=index;
  //绑定要修改的数据
  editObject.value.id=row.id;
  editObject.value.desc=row.desc;
  editObject.value.pid=row.pid;
  editObject.value.did=row.did;
  editObject.value.bid=row.bid;//床位
  editObject.value.admissiondate=row.admissiondate;
  editObject.value.disdate=row.disdate;
  editObject.value.pay=row.pay;
  editObject.value.status=row.status;    
  editObject.value.wname=row.wname;
  //打开对话框
  editWinVisible.value=true;

   const result = await hospitalapi.get("/api/doctorname");
  doctors.value=result.data;
  console.log(doctors.value);
  
   
}


    





</script>


<template>
<el-input v-model="checkObj.pid" style="width: 150px" placeholder="请填入查询的患者" />
<el-select v-model="checkObj.status" style="width: 150px" placeholder="请选择状态">
    <el-option label="空白" value=""></el-option>
    <el-option label="住院" value="住院"></el-option>
    <el-option label="出院" value="出院"></el-option>
  </el-select>
<el-button type="success" @click="checkData">查询</el-button>



<el-table
  :data="tableData"
  style="width: 100%"
 >

    <el-table-column prop="patient.name" label="患者" width="180" />
    <el-table-column prop="doctor.name" label="主治医生" width="180" />
    <el-table-column prop="department.name" label="科室" width="180" />
    <el-table-column prop="bed.bednember" label="床位号" />
     <el-table-column prop="ward.name" label="病房名" />
    <el-table-column prop="desc" label="病例描述" />
    <el-table-column prop="admissiondate" label="入院日期" />
    <el-table-column prop="disdate" label="出院日期" />
    <el-table-column prop="deposit" label="预缴住院费" />
    <el-table-column prop="pay" label="实缴费用" />
    <el-table-column prop="status" label="病人状态" />
   

<el-table-column label="操作"  width="200" label-class-name="center">  
    <template #default="scope">
      <div style="display: flex; justify-content: center; align-items: center;">
     <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
     <el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
     <el-button type="primary" @click="leave(scope.$index,scope.row)">出院</el-button>
      </div>
    </template>
   </el-table-column>  
</el-table>

  <!-- current-page分页组件初始现实的页码  size：每业的条数 -->
  <el-pagination 
   :page-size="checkObj.size"
   :current-page="checkObj.page" 
   background layout="prev, pager, next" :total="total" @current-change="checkData" />



   

<!-- start 编辑信息的弹出框 -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
     <el-form :model="editObject">
      
      <el-form-item label="患者编号" label-width="80">
        <el-input v-model="editObject.pid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="科室" label-width="80">
        <el-select v-model="editObject.dep_id"  placeholder="请选择科室" @change="depchange" readonly>
          <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主治医生" label-width="80">
        <el-select v-model="editObject.did"  placeholder="请选择医生">
          <el-option v-for="doctor in doctors" :key="doctor" :label="doctor.name" :value="doctor" ></el-option>
        </el-select>
      </el-form-item>
   

      
   
    
      <el-form-item label="病例描述" label-width="80">
        <el-input v-model="editObject.desc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="入院日期" label-width="80">
        <el-date-picker
          v-model="editObject.admissiondate"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD "
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="出院日期" label-width="80">
        <el-date-picker
          v-model="editObject.disdate"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD "
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="实缴费用" label-width="80">
        <el-input v-model="editObject.pay" autocomplete="off" />
      </el-form-item>
      <el-form-item label="病人状态" label-width="80">
  <el-select v-model="editObject.status" placeholder="请选择">
    <el-option label="出院" value="出院"></el-option>
    <el-option label="住院" value="住院"></el-option>
  </el-select>
</el-form-item>
      
    </el-form>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave" >
          保存
        </el-button>
      </div>
          </template>
  </el-dialog>
<!-- end 编辑信息的弹出框 -->

<!-- start 出院信息弹出框 -->

<el-dialog v-model="leaveWinVisible" title="新增" width="500">
    <el-form :model="leaveObject"> <!-- 使用 leaveObject 代替 addObject -->
      <el-form-item label="患者id" label-width="80">
        <el-input v-model="leaveObject.pid" readonly /> <!-- 设置为只读 -->
      </el-form-item>
      <el-form-item label="患者名字" label-width="80">
        <el-input v-model="leaveObject.name" readonly /> <!-- 设置为只读 -->
      </el-form-item>
    
      <el-form-item label="实缴费用" label-width="80">
        <el-input v-model="leaveObject.pay" autocomplete="off" />
      </el-form-item>

      <el-form-item label="出院日期" label-width="80">
        <el-input v-model="leaveObject.disdate" readonly />
      </el-form-item>
      
      <el-form-item label="病人状态" label-width="80">
        <el-select v-model="leaveObject.status" placeholder="请选择">
          <el-option label="出院" value="出院"></el-option>
        </el-select>
      </el-form-item>

      
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="leaveWinVisible = false">取消</el-button>
        <el-button type="primary" @click="leaveSave">保存</el-button> <!-- 改为调用 leaveSave -->
      </div>
    </template>
</el-dialog>
<!-- end 出院信息弹出框 -->





</template>

<style scoped>
.center {
  text-align: center;
}

/* 确保按钮宽度一致 */
.el-button {
  width: 80px; /* 根据需要调整按钮宽度 */
  padding: 6px 10px; /* 减小内边距 */
  margin: 5px; /* 按钮之间的间距 */
}


/* 如果需要，调整操作列的宽度 */
.el-table .el-table__body .center .cell {
  text-align: center;
}
.el-table, .el-pagination {
  width: 100%; /* 宽度设为100% */
  overflow-x: auto; /* 启用横向滚动 */
}

/* 表格列宽 */
.el-table-column {
  width: auto; /* 自动调整列宽 */
}

/* 按钮样式 */

/* 响应式设计 */
@media (max-width: 768px) {
  .el-button {
    width: 60px; /* 在小屏幕上进一步减小按钮宽度 */
  }
}

/* 确保分页组件在小屏幕上也能展示 */
.el-pagination {
  justify-content: center;
}

</style>